<template>
  <q-dialog
    v-model="visible"
    persistent
    maximized
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card class="bg-warning row justify-center items-center content-center">
      <q-bar
        class="full-width justify-end bg-warning"
        style="height: 50px; line-height: 50px"
      >
        <q-btn
          round
          flat
          color="white"
          icon="close"
          size="20px"
          v-close-popup
        />
      </q-bar>
      <q-card-section
        class="row justify-center items-center content-center"
        style="height: calc(100vh - 50px)"
      >
        <q-card-section class="justify-center">
          <q-spinner-box color="white" size="20em" />
        </q-card-section>
        <q-card-section
          style="width: 25rem"
          class="justify-center row q-gutter-lg"
        >
          <div class="text-h2 text-bold text-center text-white">
            {{ $t(lang + "急停复位") }}
          </div>
          <div
            class="text-white text-bold text-h5 q-pa-md text-center"
            style="
              background: transparent;
              border-radius: 1rem;
              backdrop-filter: blur(10px) brightness(50%);
            "
          >
            <div>
              {{ $t(lang + "机器人触发急停后需要手动执行复位才能继续运行") }}
            </div>
          </div>
          <q-btn
            color="negative"
            class="text-bold"
            size="xl"
            outline
            icon="clear"
            :label="$t(lang + '复位并清空队列')"
            @click="clear"
          />
          <q-btn
            color="primary"
            class="text-bold"
            size="xl"
            outline
            icon="play_arrow"
            :label="$t(lang + '复位并重试指令')"
            @click="resume"
          />
        </q-card-section>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { onUnmounted, ref } from "vue";
import { useAPIStore } from "stores/api/index.js";
import { api } from "boot/axios.js";
import { useQuasar } from "quasar";

const lang = "indexPage.deviceError.";
const $q = useQuasar();
const visible = ref(false);
const pressed = ref(false);

onUnmounted(() => {
  if (pressed.value) {
    api.get(useAPIStore().amrUrl + "amr/retry").then((rs) => {
      pressed.value = false;
      if (rs.data === "done") {
        $q.notify({ type: "positive", message: "已下发重试指令" });
      }
    });
  }
});

function clear() {
  api.get(useAPIStore().amrUrl + "amr/clear").then(() => {
    api.get(useAPIStore().amrUrl + "amr/cmd/processing").then((rs) => {
      if (rs.data.length > 0) {
        $q.notify({ message: "Failed", type: "warning", position: "top" });
      }
    });
    api.get(useAPIStore().amrUrl + "amr/reset").then((rs) => {
      if (rs.data === "done") pressed.value = false;
    });
  });
}

function resume() {
  api.get(useAPIStore().amrUrl + "amr/reset").then((rs) => {
    if (rs.data === "done") pressed.value = true;
  });
}

defineExpose({ visible });
</script>
